<template>
    <div class='wrap'>
      <div class="team-main">
        <!--img style="width:100%" src="../assets/team/bg_16.png"-->
        <div class="tip">请选择参数队伍</div>
        <div class="teams">
          <team-item v-for='(item,index) in teams' :key='item.id' :name='item.name' :id='item.id'
            :index='index' :chooseId='chooseId' @chooseTeam='chooseTeam(item.id)' @goTo='goto()'></team-item>
        </div>
        <!--div id="btn_h" @click='goto'></div-->
      </div>
    </div>
</template>

<script>
import TeamItem from '../components/TeamItem'
export default {
  name: 'Team',
  data () {
    return {
      chooseId: null,
      teams: []
    }
  },
  components: {
    TeamItem
  },
  methods: {
    chooseTeam (id) {
      this.chooseId = id
    },
    goto () {
      this.$router.push({path: '/training/' + this.chooseId})
    },
    initData () {
      this.$http.getQuestionType().then(
        (result) => {
          this.teams = result.data
          // this.chooseId = this.teams[0].id
        }
      ).catch((error) => {
        console.error(error)
      })
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  mounted: function () {
    this.initData()
    document.getElementsByTagName('body')[0].className = 'bgimg'
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/mode'})
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bgimg')
  }
}
</script>

<style>
.bgimg {
  background:url('../assets/home/bg.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.team-main {
  display: flex;
  flex-direction: column;
  background:url('../assets/team/bg_16.png') no-repeat;
  background-size:21rem 36rem;
  min-height: 36rem;
  min-width: 20.5rem;
  align-items: center;
}
.teams {
  width: 20rem;
  display: flex;
  flex-flow: row wrap;
  margin-left: 1rem;
  margin-top: 0.7rem;
}
.team-item {
  width:8.5rem;
  position: relative;
  margin: 0 1rem 0.6rem 0.4rem;
}

.btn {
  z-index: 1;
}

.shade {
  float: left;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  opacity:0.9;
  height: 5.2rem;
  width: 8.5rem;
  background:url('../assets/team/bg_10.png') no-repeat;
  background-size:cover;
}

.none {
  display: none;
}

.choose {
  display: block;
}

.tip {
  color:white;
  text-align: center;
  padding-top:1rem;
  width: 20.5rem;
  font-size: 1.1rem;
}

</style>
